import { Component } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import { Button, Dropdown, Menu, MenuItem } from 'ant-design-vue'
import { CaretDownOutlined } from '@ant-design/icons-vue'
import logoIcon from '@/assets/channel-management/detail/logo-icon.png'
import AddSchemePop from './components/AddSchemePop'
import AddDiscountPop from './components/AddDiscountPop'
import EditAgent from './components/EditAgent'
@Component
export class AccountInfoView extends Render {
    showAddScheme = false
    showAddDiscount = false
    showEditAgent = false
    renderHead() {
        return (
            <div class=" rounded-default bg-white-default">
                <div class="pb-20 flex items-start justify-between">
                    <div class="flex items-center">
                        <img src={ logoIcon } class="w-60 h-60 mr-16" alt="" />
                        <div class="">
                            <div class="flex ">
                                <div class="text-black-light-200 text-lg mr-16">润梦人力资源服务河北有限公司</div>
                                <a-tag color="success">已链接</a-tag>
                            </div>
                            <div class="mt-4 text-black-300">CQ26123145</div>
                        </div>
                    </div>
                    <div class="flex items-center">
                        <Dropdown
                            overlay={
                                <Menu>
                                    <MenuItem onClick={() => { this.showEditAgent = true }}>编辑资料</MenuItem>
                                    <MenuItem onClick={() => { this.showAddScheme = true }}>新增方案</MenuItem>
                                    <MenuItem onClick={() => { this.showAddDiscount = true }}>新增优惠</MenuItem>
                                </Menu>
                            }
                        >
                            <div class="px-12 py-4 border-solid border-gray-light-300 border rounded-sm flex items-center mr-12">
                                <div class="text-base">更多设置</div>
                                <CaretDownOutlined />
                            </div>
                        </Dropdown>
                        <Button type="primary" >返回</Button>
                    </div>
                </div>
                <div class="w-full border-1  border-gray-light-400"></div>
                <div class="mt-20 flex">
                    <div class="w-1/4">
                        <div class="text-gray-light-600 text-base">累计保费</div>
                        <div class="mt-12 font-semibold text-xl text-black-light-100 font-medium">￥8987.00</div>
                    </div>
                    <div class="w-1/4">
                        <div class="text-gray-light-600 text-base">理赔案件</div>
                        <div class="mt-12 font-semibold text-xl text-black-light-100 font-medium">1348</div>
                    </div>
                    <div class="w-1/4">
                        <div class="text-gray-light-600 text-base">理赔率</div>
                        <div class="mt-12 font-semibold text-xl text-green font-medium">70</div>
                    </div>
                    <div class="w-1/4">
                        <div class="text-gray-light-600 text-base">建档时间</div>
                        <div class="mt-12 font-semibold text-xl text-black-light-100 font-medium">2024.10.12 14:00:00</div>
                    </div>
                </div>
            </div>
        )
    }
    render() { 
        return (
            <>
                {this.renderHead()}
                <AddSchemePop
                    v-model:show={ this.showAddScheme }
                />
                <AddDiscountPop
                    v-model:show={ this.showAddDiscount }
                />
                <EditAgent
                    v-model:show={ this.showEditAgent }
                />
            </>
        )
    }
}

export default toNative<{}, {}>(AccountInfoView)